<template>
	<view class="content">
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="data-list" v-for="(item, key) in dataList" :key="key" @click="onClickItem(item)">
				<view class="data-item">
					<view class="item-text item-more">
						<view class="item-title">{{item.messageTopic}}</view>
						<view v-if="item.isReaded == 'N'" class="unread"></view>
					</view>
					<view class="item-text item-desc">
						{{item.messageContent}}
					</view>
					<view class="item-text item-more two-sides">
						<view class="item-desc">{{$t('app.other.sendUser')}}：{{item.sendUserName}}</view>
						<view class="item-time">{{item.createTime | dateFormat('yyyy-MM-dd HH:mm:ss')}}</view>
					</view>
				</view>
			</view>
		</mescroll-body>		
		<uni-drawer ref="drawer" mode="right">
			<view class="filter">
				<view class="filter-line">
					<view class="filter-title">{{$t('app.other.topic')}}</view>
					<view class="filter-input">
						<input :placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" v-model="queryParams.messageTopic" />
					</view>
				</view>
				<view class="filter-line">
					<view class="filter-title">{{$t('app.other.messageContent')}}</view>
					<view class="filter-input">
						<input :placeholder="$t('baseCommon.message.pleaseEnter', { title: '' })" v-model="queryParams.messageContent" />
					</view>
				</view>
				<view class="filter-line">
					<view class="filter-title">{{$t('baseCommon.time.startTime')}}</view>
					<view class="filter-input">
						<date-picker :showValue="queryParams.beginreceiveTime" @change="dateChange($event, 'beginreceiveTime')">
							{{ queryParams.beginreceiveTime || $t('baseCommon.message.pleaseSelect', { title: '' }) }}
						</date-picker>
					</view>
				</view>
				<view class="filter-line">
					<view class="filter-title">{{$t('baseCommon.time.endTime')}}</view>
					<view class="filter-input">
						<date-picker :showValue="queryParams.endreceiveTime" @change="dateChange($event, 'endreceiveTime')">
							{{ queryParams.endreceiveTime || $t('baseCommon.message.pleaseSelect', { title: '' }) }}
						</date-picker>
					</view>
				</view>
				<view class="filter-line checkbox">
					<checkbox-group @change="checkRead">
						<label>
							<checkbox value="N" :checked="queryParams.isReaded == 'N' ? true : false" />{{$t('app.other.unread')}}
						</label>
					</checkbox-group>
				</view>
			</view>
			<view class="filter-btn">
				<button type="primary" @click="onConfirm">{{$t('baseCommon.buttons.confirm')}}</button>
				<button type="default" @click="onClear">{{$t('baseCommon.buttons.reset')}}</button>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import { getAllMsgList, updateReadStatus } from '@/api/platform/common.js'
	import { getInstIdFormData } from '@/api/base/flow.js'
	import { notice, business } from '@/utils/common.js'
	
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				userId: '',
				dataList: [],
				queryParams: {
					messageTopic: '',
					messageContent: '',
					beginreceiveTime: '',
					endreceiveTime: '',
					isReaded: ''
				},
				backButtonPress: 0
			}	
		},
		onLoad() {
			this.userId = uni.getStorageSync("userId")
		},
		onShow() {
			business.refreshMsgCount()
		},
		methods: {
			downCallback() {
				// 清空查询条件
				this.onClear()
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				let pager = {
					start: page.num, // 页码, 默认从1开始
					limit: page.size // 页长, 默认每页10条
				}
				
				// 只能查看自己的消息
				this.queryParams.receiveUser = this.userId
				
				getAllMsgList(pager, this.queryParams).then(res =>{
					let curPageData = res.data.records;
					let curPageLen = curPageData.length; 
					let totalSize = res.data.total;
					if(page.num == 1){
						//如果是第一页需手动置空列表
						this.dataList = [];
					}
					this.dataList = this.dataList.concat(curPageData); //追加新数据
					this.mescroll.endBySize(curPageLen, totalSize); 
				})
			},
			async onClickItem(item) {
				// let params = JSON.parse(item.appParams)
				// if(params.bizType != 'flow') {
				// 	return
				// }
				// getInstIdFormData(params.bizKey).then(res=>{
				// 	let opinionList = res.data.attributes.opinionList
				// 	let taskId = opinionList[opinionList.length-1].taskId
				// 	let url = res.data.formModel.mobileValue
				// 	let nodeId = res.data.attributes.nodeId
					
				// 	uni.navigateTo({
				// 		url: url + "&type=approve&taskId=" + taskId + "&nodeId=" + nodeId + "&sourceType=msg"
				// 	})
				// })
				// 将消息更新为已读
				await updateReadStatus({
					messageId: item.messageId,
					isReaded: 'Y'
				})
				// 刷新列表
				this.reload()
				// 刷新未读消息数量
				business.refreshMsgCount()
			},
			reload(){
				this.mescroll.resetUpScroll();
			},
			dateChange(e, attr) {
				this.queryParams[attr] = e
			},
			checkRead(e) {
				this.queryParams.isReaded = e.detail.value[0]
			},
			onClear() {
				this.queryParams.messageTopic = ""
				this.queryParams.messageContent = ""
				this.queryParams.beginreceiveTime = ""
				this.queryParams.endreceiveTime = ""
				this.queryParams.isReaded = ""
			},
			onConfirm() {
				if(this.queryParams.beginreceiveTime && !this.queryParams.endreceiveTime 
					|| !this.queryParams.beginreceiveTime && this.queryParams.endreceiveTime) {
					notice.toast(this.$t('app.message.selectDateRange'))
					return
				}
				this.$refs.drawer.close()
				this.reload()
			}
		},
		onNavigationBarButtonTap(e) {
			this.$refs.drawer.open();
		},
		onBackPress() {
			this.backButtonPress++;
			if (this.backButtonPress > 1) { 
				// 退出清除角标
				plus.runtime.setBadgeNumber(0);
				// 退出清除token
				uni.removeStorageSync('_app_token');
				plus.runtime.quit();
			} else {
				plus.nativeUI.toast(this.$t('app.message.pressAgainExit'));
			}
			return true;
		}
	}
</script>

<style lang="scss">
	@import '@/static/style/common-list.scss';
	
	.unread {
		background-color: #DD524D;
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}
</style>
